nav {
  // position: absolute;
  // z-index: 2;
  width: 100%;
  // background-color: transparent;
  background-color: #F9F8F6;
  padding: 15px 0 10px 0;
  transition: .3s;
  margin-bottom: 30px;

  // &:hover {
  //   background-color: #F9F8F6;
  //   box-shadow: 0 5px 5px rgba(0, 0, 0, .05);
  //   li {
  //     transform: translateX(0);
  //   }
  // }
  .container {
    display: flex;
  }

  ul {
    // opacity: 0;
    transition: .5s;
    padding-right: 150px;
    margin: 0 auto;

    li {
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      float: left;
      font-size: 20px;
      margin-left: 20px;
      // transform: translateX(100px);
      transition: .8s;
      padding: 5px;
      border-radius: 5px;
    }
  }

  // &:hover ul {
  //   opacity: 1;
  // }
  
  img {
    margin-left: 50px;
    height: 50px;
  }

  .active {
    background-color: #333;
    color: #F9F8F6;
    a {
      color: #F9F8F6;
    }
  }
}
